<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./static/d3.v3.min.js"></script>	
		<style type="text/css">
			svg{border: 1px solid #333;}
		</style>
		<script>
			window.onload=function(){
				//准备数据
				let arr=[60,90,120,210]
				
				//线性比例尺
				let linearScale=d3.scale.linear()
							.domain([0,210])
							.range([0,580])
				
				
				//添加svg
				let svg=d3.select("body").append("svg")
					.attr("width",600)
					.attr("height",400)
				
				let group=svg.append("g")
						.attr("transform","translate(0,60)")
				
				//绑定数据
				group.selectAll("rect").data(arr).enter()
					.append("rect")
					.attr("x",0)
					.attr("y",(item,index)=>{
						return index*80
					})
					.attr("width",(item,index)=>{
						// return item;
						return linearScale(item)
					})
					.attr("height",()=>{
						return 30
					})
					.attr("fill","tomato")
				
			}	
		</script>
	</head>
	<body></body>
	
</html>
